<template>
	<view class="info" v-if="!firstLoading">
		<info-header :info="handlerInfo" 
				:isAttention.sync="other.isAttention"
		></info-header>
		<info-content ref="infoContent" v-if="!info_id || userInfo.id == info_id"></info-content>
		<view v-else class="py-2">
			<waterful-list 
				:list="articles"
				@itemClick="goArticleDetails"
				:load="load"
				@getMore="getUserArticles()"
			></waterful-list>
		</view>
		
		<defineTabbar></defineTabbar>
	</view>
	<loading-page v-else></loading-page>
</template>

<script>
	// 自定义tabbar
	import defineTabbar from "@/components/define-tabbar/define-tabbar.vue";
	// 个人资料的header
	import infoHeader from "./cpn/info-header.vue";
	// 个人资料的个人文章之类的内容
	import infoContent from "./cpn/info-content.vue";
	import waterfulList from "@/components/waterfulList/waterfulList.vue";
	
	import { mapState } from 'vuex';
	import {
		getUserInfo
	} from "@/api/user.js";
	import {
		getUserArticles
	} from "@/api/search.js";
	
	export default {
		components: {
			defineTabbar,
			infoHeader,
			infoContent,
			waterfulList
		},
		data() {
			return {
				// 屏幕状态栏高度
				statusBarHeight: 0,
				info_id: null,
				firstLoading: true,
				info: null,
				pageInfo: {
					page: 1, 
					pageSize: 20
				},
				load: 'loadmore',
				articles: [],
				other: {
					isAttention: false
				}
			};
		},
		computed: {
			...mapState({
				userInfo: state => state.user.info 
			}),
			handlerInfo() {
				let backInfo = this.info? this.info : this.userInfo;
				return backInfo;
			}
		},
		// 当是查看其他用户信息时
		async onLoad(options) {
			if(options.id) {
				this.info_id = options.id;
				try{
					await this.getUserInfo();
					await this.getUserArticles();
					this.firstLoading = false;
				}catch(e) {
					this.$go(null, null, 'navigateBack');
				}
			}else this.firstLoading = false;
			
		},
		onReachBottom() {
			this.$refs.infoContent.reachBottom();
		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					this.statusBarHeight = res.statusBarHeight;
				}
			})
		},
		methods: {
			//获取非当前登录用户的信息
			getUserInfo() {
				return new Promise((resolve, reject) => {
					getUserInfo({
						id: this.info_id
					}).then(res => {
						this.info = res.user;
						this.other.isAttention = res.other.isAttention;
						resolve();
					}).catch(err => {
						this.$msg(err.message);
						reject();
					})
				})
			},
			// 获取非当前登录用户文章
			getUserArticles() {
				if(this.load != 'loadmore') return;
				this.load = 'loading';
				
				return new Promise((resolve, reject) => {
					getUserArticles(this.info_id, this.pageInfo).then(res => {
						this.articles = [...this.articles, ...res.articles];
						if(res.total <= this.articles.length) this.load = 'nomore';
						else {
							this.load = 'loadmore';
							this.pageInfo.page++;
						}
						resolve();
					}).catch(err => {
						this.$msg(err.message);
						reject();
					})
				})
			},
			// 去文章详情页
			goArticleDetails(value) {
				this.$go("/pages/article/index",{
					id: value.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.info{
	.header{
		position: fixed;
		width: 100vw;
		background-color: black;
		color: white;
		.top{
			overflow: hidden;
			.icon{
				float: right;
				width: 60rpx;
			}
		}
		.userinfo{
			.right{
				.name{
					font-size: 35rpx;
					font-weight: bold;
				}
				.count{
					font-size: 25rpx;
					color: #d0d0d0;
				}
			}
		}
	}
}
</style>
